<!-- Copyright 2020 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->
<style>

#tutorial {
  background: #FFF;
  bottom: 0;
  left: 0;
  margin-bottom: 80px;
  margin-top: 80px;
  position: fixed;
  right: 0;
  top: 0;
}

</style>

<div id="tutorial">

<main-menu
    header_="tutorial_main_menu_header"
    header-description_="[[ computeMainMenuHeaderDescription_() ]]"
    button-data_="[[ mainMenuButtonData ]]"
    active-screen="[[ activeScreen ]]"
    medium="[[ medium ]]"
    on-button-clicked="onMainMenuButtonClicked_">
</main-menu>

<lesson-menu
    curriculum="[[ curriculum ]]"
    num-lessons="[[ numLessons ]]"
    header-description_="[[ computeLessonMenuHeaderDescription_() ]]"
    button-data_="[[ computeLessonMenuButtonData_() ]]"
    active-screen="[[ activeScreen ]]"
    on-button-clicked="onLessonMenuButtonClicked_">
</lesson-menu>

<lesson-container
    id="lessonContainer"
    active-screen="[[ activeScreen ]]"
    active-lesson-id="[[ activeLessonId ]]"
    lesson-data="[[ lessonData ]]"
    on-lessons-loaded="onLessonsLoaded_">
</lesson-container>

<navigation-buttons
    active-screen="[[ activeScreen ]]"
    active-lesson-index="[[ activeLessonIndex ]]"
    curriculum="[[ curriculum ]]"
    num-lessons="[[ numLessons ]]"
    on-next-lesson-button-clicked="showNextLesson"
    on-previous-lesson-button-clicked="showPreviousLesson_"
    on-restart-quick-orientation-button-clicked="showFirstLesson_"
    on-lesson-menu-button-clicked="showLessonMenu_"
    on-main-menu-button-clicked="showMainMenu_"
    on-exit-button-clicked="exit">
</navigation-buttons>

</div>
